<template>
<div>
  <div class="container">
    <!-- 头部渐变背景   -->
    <div class="bg-color" :style="{backgroundImage:'linear-gradient(#FF243D 20%, #f5f5f5 80%)'}"></div>      
    <div>
      <div class="font-27 font-w font-white mar-t-9">{{ orderStatusType }}</div>
      <div class="delivery-info-box mar-b-10 mar-t--9">
        <div class="bg-color-white panel-box">
          <!-- 门店配送-->
          <div class="panel-body pad-l-15 pad-r-15 pad-b-12 pad-t-12 bg-color-white" v-if="order.deliveryType === 1">
            <div class="flex-col">
              <div class="flex flex-between">
                <div class="flex-col">
                  <div class="address-info">
                    <span class="label-ad-sp mar-t-7">
                      <span
                        v-if="order.addressLabel"
                        class="font-11 width-30 height-15 flex flex-center mar-r-10 font-normal"
                        :class="'label-'+ order['labelStyle']">
                        <span>{{order.addressLabel}}</span>
                      </span>
                    </span>
                    <span class="font-color font-18 font-w">{{order.customerAddress}}</span>
                  </div>
                  <span class="font-13 font-color-6">{{order.customerNickname}} {{order.customerPhone}}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 门店自提/社团-->
          <div class="panel-body pad-l-15 pad-r-15 pad-b-12 pad-t-12 bg-color-white" v-if="order.deliveryType === 2">
            <div class="font-15 font-color">
              <div class="flex mar-b-8">
                <span class="font-w">提货人：</span>
                <span class="font-w">{{nicknameAdd}} {{phoneAdd}}</span>
              </div>
              <div class="flex flex-between mar-b-8">
                <div class="flex">
                  <span class="font-w">提货点：</span>
                  <span class="font-w">{{order.memberStore.storeName}}</span>
                </div>
                <div class="flex v-align-c btn-box">
                  <span class="height-14 v-line mar-r-6">|</span>
                  <div class="flex v-align-c" @click="callPhone">
                    <img class="width-12 height-12" v-if="fileSpace" :src="fileSpace + '/images/phone-icon.png'" alt="">
                    <span class="font-15 mar-l-4">联系团长</span>
                  </div>
                </div>
              </div>
              <div class="flex address-box">
                <div class="flex">
                  <span class="font-w">地&nbsp;&nbsp;&nbsp;址：</span>
                  <div class="width-149 text-align-j font-color-6">
                    {{order.memberStore.storeAddress}}
                  </div>
                </div>
                <div class="flex v-align-c btn-box">
                  <span class="height-14 v-line mar-r-6">|</span>
                  <div class="flex v-align-c" @click="goWxLocal">
                    <van-icon name="map-marked" />
                    <span class="font-15 mar-l-4">导航前往</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="prompt font-12 pad-t-10 pad-b-10 pad-l-15 flex v-align-c">
            <img v-if="fileSpace" class="width-13 height-13 mar-r-6" :src="fileSpace + '/images/save-icon.png'" alt="">
            <span>购物中如有问题，可联系客服，保障售后无忧</span>
          </div>
        </div>
      </div>
      <div v-if="order.crossBorderOrderType === 2" class="panel-cb-pl mar-b-10">
        <div class="flex v-align-c pad-b-2">
          <img class="width-15 height-13 mar-r-6" v-if="fileSpace" :src="fileSpace + '/images/icon-codeid-s.png'" alt="">
          <div class="font-13 c-cb-wr">跨境商品需提供付款人信息用以办理清关手续</div>
        </div>
        <div class="pad-l-21 font-15">
          <span class="mar-r-21">{{ order.certificateRealName }}</span>
          <span>{{ order.certificateNumber }}</span>
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="goods-list-box pad-t-10 pad-l-16 pad-r-12 pad-b-1 mar-b-10">
        <div class="shop-name pad-b-13 mar-b-11">
          <span class="font-color font-16">{{ order.memberStoreTitle }}</span>
        </div>
        <div class="mar-b-18">
          <div v-for="(item, index) in order.orderGoodsList" :key="index" @click="goDetail(item)" class="mar-t-15">
            <div class="flex">
              <div class="goods-img-box mar-r-8 width-80 height-80 pos-rel">
                <!-- 跨境图标， 暂时隐藏保税标签 -->
                <!-- <div class="cross-border-pic">
                  <img
                    v-if="fileSpace && order.crossBorderOrderType === 2"
                    :src="fileSpace + '/images/icon-cross-border-s.png'"
                    class="icon-cross-border cross-s"
                    alt="">
                </div> -->
                <img class="width-80 height-80" v-if="item.goodsImageUrl" :src='item.goodsImageUrl' alt="">
              </div>              
              <div class="flex-col goods-box-right">
                <div>
                  <div class="flex v-align-c">
                    <div v-if="item.activityTypeLabel" class="tag-goods flex flex-center" :class="andType ? '' : 'iosType'">
                      <span>{{ item.activityTypeLabel }}</span>
                    </div>
                    <div class="_line-1 font-16 font-color flex-item">{{item.goodsTitle}}</div>
                  </div>
                  <div v-if="item.skuDetail" class="font-color-9 font-12">{{item.skuDetail}}</div>
                </div>
                <div class="flex goods-price-info">                
                  <div class="font-12 font-color-9 flex-col">  
                    <div class="pad-t-2"></div>                    
                    <!-- 商品状态 (社群分销使用) end-->
                    <div>
                      <span>￥{{ item.goodsPrice }}/件</span>
                      <span class="mar-l-13">共{{ item.goodsNum }}件</span>
                    </div>
                  </div>
                  <!-- afterSaleStatus 商品售后状态 -3:系统自动关闭 -2:顾客确认收货关闭  -1：已拒绝 0：待审核 1：待退货 2：退款中 3：已完成 4：已关闭 -->
                  <!-- orderStatus 订单状态： -10: 待付货款 -2: 已付款取消 -1: 未付款取消 0: 未付款 1: 已付款 20: 部分发货 2: 已发货 3: 已收货 4: 已完成 -->
                  <div v-if="order.orderStatus !== -2 && order.orderStatus !== -1 && order.orderStatus !== 0 && order.orderStatus !== 4">
                    <div @click.stop="linkToDetail(item)"
                      v-if="(item.afterSaleStatus===0 || item.afterSaleStatus===1 || item.afterSaleStatus===2)">
                      <div class="font-13 font-color retrun-btn flex flex-center width-56 height-25">退款中</div>
                    </div>
                    <div class="font-13 font-color retrun-btn flex flex-center width-56 height-25"
                      v-else-if="item.afterSaleStatus===-3 || item.afterSaleStatus===4 || (item.afterSaleStatus===3 && (item.afterSaleGoodsNum===item.goodsNum))">退款关闭</div>
                    <div v-else-if="order.afterSaleStatus !== 1 || (order.afterSaleStatus === 1 && order.deliveryType ===1)">
                      <div @click.stop="linkToApply(item)"
                        v-if="orderStatusType !== '待发货' && (item.afterSaleStatus===-2 || item.afterSaleStatus===-1 || !item.afterSaleStatus || (item.afterSaleStatus===3 && (item.afterSaleGoodsNum<item.goodsNum)))" >
                        <div class="font-13 font-color retrun-btn flex flex-center width-56 height-25">售后</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 总额 优惠卷 实付-->
        <div class="mar-b-10">
          <div class="font-color flex flex-between mar-b-8">
            <span class="font-16">商品总额</span>
            <span class="font-19 font-w"><span class="font-16">￥</span>{{ goodsTotalPrice }}</span>
          </div>
          <div v-if="order.couponReduceAmount !== '0.00'" class="flex coupon-box mar-b-4">
            <div class="flex v-align-c">
              <span class="coupon-tag width-16 height-16 font-12 flex flex-center">券</span>
              <span class="font-16 mar-l-3">优惠券</span>
            </div>
            <span class="font-19 font-w red-color"><span class="font-16">-￥</span>{{order.couponReduceAmount}}</span>
          </div>
          <div class="pad-t-2 pad-b-2 flex v-align-c mar-b-4">
            <span class="flex-item">运费</span>
            <label class="font-19 font-w"><span class="font-16 font-normal pad-r-3">¥</span>{{order.freight}}</label>
          </div>
          <div v-if="order.taxAmount && (order.taxAmount * 1 > 0)" class="pad-t-2 pad-b-2 flex v-align-c mar-b-4">
            <span class="flex-item">税费</span>
            <label class="font-19 font-w"><span class="font-16 font-normal pad-r-3">¥</span>{{order.taxAmount}}</label>
          </div>
          <div v-if="personalType !== '0'" class="pad-t-2 pad-b-2 flex v-align-c mar-b-4">
            <span class="flex-item">分销佣金</span>
            <label class="font-19 font-w"><span class="font-16 font-normal pad-r-3">¥</span>{{order.memberCommission}}</label>
          </div>
          <div class="flex v-align-b">
            <div class="flex-item"></div>
            <span class="font-16 font-color-9 mar-b-6">实付:</span>
            <div style="margin-left:auto">              
              <span class="font-16 font-color font-w">￥</span>
              <span class="font-26 font-color font-w">{{order.actualPrice}}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 备注 -->
      <div class="remarks-box font-16 pad-t-8 pad-b-8 pad-l-15 flex pad-r-15 v-align-t">
        <span class="font-color">备注：</span>
        <div class="flex-item">{{order.customerComment}}</div>
      </div>
      <!-- 订单信息 -->
      <div class="flex-col order-info-box pad-t-10 pad-l-15 pad-b-20 pad-r-5">
        <div class="mar-b-8 flex v-align-c">
          <span class="font-14 font-color-9">订单编号</span>
          <span class="mar-l-20 flex-item">{{order.orderNo}}</span>
          <span
            @click="$pt.setClipboardData({data: order.orderNo})"
            class="font-12 red-color width-37 height-18 flex flex-center copy-btn mar-l-10">复制</span>
        </div>
        <div class="font-14 mar-b-8">
          <span class="font-color-9">下单时间</span>
          <span class="font-color mar-l-20">{{order.createTime}}</span>
        </div>
        <div class="font-14 mar-b-8">
          <span class="font-color-9">付款时间</span>
          <span class="font-color mar-l-20">{{order.payTime}}</span>
        </div>
        <div v-if="order.receivedTime" class="font-14 mar-b-8">
          <span class="font-color-9">收货时间</span>
          <span class="font-color mar-l-20">{{order.receivedTime}}</span>
        </div>
        <div v-if="order.completeTime" class="font-14">
          <span class="font-color-9">完成时间</span>
          <span class="font-color mar-l-20">{{order.completeTime}}</span>
        </div>
      </div>
      <!-- 取消/取货码 -->
      <div
        v-if="(order.orderStatus == 0 && order.customerMemberId === getCustomerId) || ((order.orderStatus == 2 || order.orderStatus == 20) && order.customerMemberId === getCustomerId) || (order.orderStatus === 1 && order.cancelFlag === 0 && orderFrom === 2 && order.customerMemberId === getCustomerId)"
        class="btn-group-box flex pad-b-6 pad-l-15 pad-r-15 pad-t-9">
        <div
          v-if="(order.orderStatus == 2) && order.customerMemberId === getCustomerId && personalType === '0' && order.statusOverNum !== goodsListLen"
          class="cancle-btn flex flex-center mar-r-16">
          确认收货
        </div>
        <!-- <div
          v-if="order.orderStatus == 0 && order.customerMemberId === getCustomerId"
          class="get-code-btn flex flex-center"
          @click="payOrder">
          去支付</div> -->
      </div>
      <!-- 二维码 -->
      <div v-if="false" class="code-box">
        <van-popup :round="true" :show="showCodeAlert" @close="showCodeAlert = false">
          <div class="width-300">
            <!-- 社区团购 -->
            <div class="width-300 height-127 alert-bg pad-t-5 text-align-c" v-if="groupBuy">
              <span class="font-21 font-white font-w">{{appName}}</span>
              <div class="font-12 font-white flex mar-t-1">
                <span class="flex subject" style="margin-left:41px"><span class="dots"></span>货源直采</span>
                <span class="flex subject mar-l-28"><span class="dots"></span>品质保证</span>
                <span class="flex subject mar-l-27"><span class="dots"></span>便宜省心</span>
              </div>
            </div>
            <!-- 门店自提 -->
            <div v-else class="flex-col flex-center mar-t-18">
              <span class="font-15 font-color font-w mar-b-17">请向商家出示提货码</span>
              <img v-if="fileSpace" class="width-275 height-67" :src="fileSpace + '/images/test-code.png'" alt="">
            </div>
            <div class="width-275 height-283 code-area flex flex-center" :style="{top: groupBuy ? '-57px':'15px'}">
              <img class="width-per-100" src="https://img-1.joinsun.vip/upload/80e8213f1176c62654f1d8fbcf9a1c10.png" alt="">
            </div>
            <div v-if="groupBuy" class="font-15 font-color text-align-c remark-text font-w">
              <span>请向团长展示此二维码</span>
            </div>
            <div v-else class="font-15 font-color text-align-c font-w mar-b-20" style="margin-top:34px">
              <span>请向店主展示此二维码</span>
            </div>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  import {
    getProjectOrder, payProjectOrder
  } from '@/api/distribution'
  import {
    cancelOrder, doReceiveGoods, checkCancelPaidOrder
  } from '@/api/personal'
  import { listEnterpriseMessageConfig, getAuthority } from '@/api/common'

  export default {
    data() {
      return {
        customerInfo: {
          nickname: '',
          phone: '',
          address: ''
        },
        nicknameAdd: '',
        phoneAdd: '',
        addressAdd: '',
        memberAvatar: '',
        customField: {},
        userNickname: '',
        order: {},
        goodsTotalPrice: '0.00',
        orderStatusText: '',
        orderStatusTips: '',
        orderStatusType: '',
        personalType: '',
        submitStatus: false,
        shareType: false, // 区分分销商与买家
        statusIs: false, // 区分买家卖家
        orderFrom: 0,
        goodsListLen: 0,
        urlFrom: '',
        messageIds: [],
        enterpriseCustomerServiceAuthority: true, // 企业客服增值功能 0关闭 1开启
        customerServiceFlag: 0, // 是否开启客服权限 0：关闭 1：开启
        customerServiceType: '', // 客服类型 1：小B客服 2：企业客服
        serviceType: 0, // 客服类型 1：小B客服 2：企业客服
        andType: false
      }
    },
    computed: {
      isIPhoneX() {
        return this.$utils.isIPhoneX()
      },
      totalCommission() {
        return (Number(this.order.memberCommission) + Number(this.order.shareCommission)).toFixed(2)
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onShow() {
      this.urlFrom = this.getCurrentPage().query.urlFrom
      // 售后页面，返回订单详情时，需获取订单最新的售后状态
      if (this.$pt.getStorageSync('refundType')) {
        this.initEls()
      }
    },
    mounted() {
      this.initEls()
      this.getAuthority()
      this.userNickname = this.$pt.getStorageSync('nickName')
      wx.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#FF243D'
      })
      let sysInfo = ''
      sysInfo = this.$pt.getSystemInfoSync()
      if (sysInfo.system.indexOf('iOS') === -1) {
        // android类型
        this.andType = true
      } else {
        this.andType = false
      }
    },
    methods: {
      // 获取后台 企业增值功能是否开启
      getAuthority() {
        getAuthority().then(res => {
          this.enterpriseCustomerServiceAuthority = res.data.enterpriseCustomerServiceAuthority
          this.serviceType = res.data.customerServiceType
        }).catch(err => {
          console.log(err)
        })
      },
      // 跳小B客服聊天窗口
      goServiceToB(order) {
        let cId = this.$pt.getStorageSync('customerId')
        let mId = order['memberId']
        if (cId === mId) {
          this.$utils.showToast({
            title: '不能与自己聊天'
          })
        } else {
          this.$pt.navigateTo({url: '/pages/personal/message/detail/main?memberId=' + order.memberId + '&orderId=' + order['orderId'] + '&orderType=' + order.orderType})
        }
      },
      initEls() {
        this.orderFrom = Number(this.getCurrentPage().query.orderFrom)
        let personalType = this.$pt.getStorageSync('personalType')
        // 判断是否为分销商
        let shareType = this.getCurrentPage().query.shareType
        let detail = this.getCurrentPage().query.detail
        if (shareType === '1') {
          this.shareType = true
        } else {
          this.shareType = false
        }
        if (personalType === 0 || detail) {
          this.statusIs = false
        } else if (personalType === 1) {
          this.statusIs = true
        }
        this.getOrder()
        this.messageConfig()
      },
      getOrder() {
        const orderId = this.getCurrentPage().query.orderId
        this.personalType = this.getCurrentPage().query.personalType
        if (!orderId) {
          return
        }
        getProjectOrder(orderId).then((response) => {
          if (response.isError) return
          // response.data.addressLabel = '家'
          // response.data.taxAmount = '0.01'
          this.order = response.data
          this.order.statusOverNum = 0
          if ('addressLabel' in this.order) {
            switch (this.order.addressLabel) {
              case '公司':
                this.order.labelStyle = 1
                break
              case '家':
                this.order.labelStyle = 2
                break
              case '其他':
                this.order.labelStyle = 3
                break
              case '学校':
                this.order.labelStyle = 4
                break
            }
          }
          // 收货人信息
          this.nicknameAdd = response.data.customerNickname
          this.phoneAdd = response.data.customerPhone
          this.addressAdd = response.data.customerAddress
          this.memberAvatar = response.data.memberAvatar
          this.customerServiceType = response.data.customerServiceType ? response.data.customerServiceType : ''
          this.customerServiceFlag = response.data.customerServiceFlag
          switch (this.order.orderStatus) {
            case -2:
              this.orderStatusType = '已取消'
              this.orderStatusText = '订单已取消'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
            case -1:
              this.orderStatusType = '已取消'
              this.orderStatusText = '订单已取消'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
            case 0:
              this.orderStatusType = '未付款'
              this.orderStatusText = '等待买家付款'
              this.orderStatusTips = '请在24小时内完成支付，逾期支付，订单将自动取消'
              break
            case 1:
              this.orderStatusType = '待发货'
              if (this.order.orderType === 10) {
                this.orderStatusText = '等待卖家发货'
                this.orderStatusTips = '如有问题可在下方联系卖家'
              } else {
                this.orderStatusText = '等待卖家发货'
                this.orderStatusTips = '如有问题可在下方联系卖家'
              }
              break
            case 2:
              this.orderStatusType = '已发货'
              if (this.order.orderType === 10) {
                this.orderStatusText = '物流派送中'
                this.orderStatusTips = '如有问题可在下方联系卖家'
              } else {
                this.orderStatusText = '物流派送中'
                this.orderStatusTips = '如有问题可在下方联系卖家'
              }
              break
            case 3:
              this.orderStatusType = '已收货'
              this.orderStatusText = '订单已收货'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
            case 4:
              this.orderStatusType = '已完成'
              this.orderStatusText = '订单已完成'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
            case 20:
              // this.orderStatusType = '部分已发货'
              // this.orderStatusText = '物流派送中'
              // this.orderStatusTips = '如有问题可在下方联系卖家'
              this.orderStatusType = '待发货'
              this.orderStatusText = '等待卖家发货'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
          }
          if (this.order.deliveryType === 2) {
            switch (this.order.verifyStatus) {
              case 1:
                this.orderStatusType = '待核销'
                this.orderStatusText = '订单已取消'
                this.orderStatusTips = '如有问题可在下方联系卖家'
                break
              case 3:
                this.orderStatusType = '已收货'
                this.orderStatusText = '等待买家付款'
                this.orderStatusTips = '请在24小时内完成支付，逾期支付，订单将自动取消'
                break
              case 4:
                this.orderStatusType = '已完成'
                this.orderStatusText = '等待买家付款'
                this.orderStatusTips = '请在24小时内完成支付，逾期支付，订单将自动取消'
                break
            }
          }
          let total = 0
          if (this.order && this.order.orderGoodsList) {
            this.goodsListLen = this.order.orderGoodsList.length
            this.order.orderGoodsList.forEach(goods => {
              let price = goods.goodsPrice * goods.goodsNum
              total += price
            })
          }
          this.goodsTotalPrice = total.toFixed(2)
          this.order.orderGoodsList.forEach((item, index) => {
            if (item.afterSaleStatus === -3 || item.afterSaleStatus === 4 || (item.afterSaleStatus === 3 && (item.afterSaleGoodsNum === item.goodsNum))) {
              this.order.statusOverNum++
            }
          })
        }).catch(() => {
        })
      },
      payOrder() {
        if (this.submitStatus) {
          // 防重复提交
          return
        }
        this.submitStatus = true
        payProjectOrder(this.order.orderId).then(response => {
          if (response.isError) {
            this.submitStatus = false
            return
          }
          const that = this
          const payParams = response.data
          let resType = ''
          if (this.order.orderType === 30) {
            resType = '20'
          } else {
            resType = '10'
          }
          that.$pt.requestPayment({
            'timeStamp': payParams.timeStamp,
            'nonceStr': payParams.nonceStr,
            'package': payParams.package,
            'signType': payParams.signType,
            'paySign': payParams.paySign,
            'success': function(res) {
              that.submitStatus = false
              that.$pt.redirectTo({ url: '/pages/shop/result/main?successFlag=1&price=' + payParams.price +
                '&orderId=' + that.order.orderId + '&resType=' + resType })
            },
            'fail': function(res) {
              console.log(res)
              that.submitStatus = false
              that.$pt.navigateTo({ url: '/pages/shop/result/main?successFlag=0&price=' + payParams.price +
                '&orderId=' + that.order.orderId + '&resType=' + resType })
            }
          })
        })
      },
      linkToDetail(sku) {
        if (this.statusIs) return
        // console.log('sku', sku)
        sku.orderId = this.order.orderId
        let value = JSON.stringify(sku)
        this.$pt.navigateTo({url: `/pages/order/refund-detail/main?sku=${value}`})
      },
      linkToApply(sku) {
        if (this.statusIs) return
        // console.log(sku)
        let that = this
        let rejectArr = []
        if (!this.messageIds.length) {
          sku.orderId = this.order.orderId
          let value = JSON.stringify(sku)
          this.$pt.navigateTo({url: `/pages/order/refund-view/main?sku=${value}`})
          return
        }
        this.$pt.requestSubscribeMessage({
          tmplIds: that.messageIds,
          success: function(res) {
            // 成功
            Object.keys(res).forEach(key => {
              if (res[key] === 'reject') {
                rejectArr.push(key)
              }
            })
            if (rejectArr.length) {
              that.messageIds = rejectArr
              that.$utils.showToast({title: '请允许消息通知！'})
            } else {
              sku.orderId = that.order.orderId
              let value = JSON.stringify(sku)
              that.$pt.navigateTo({url: `/pages/order/refund-view/main?sku=${value}`})
            }
          },
          fail(err) {
            // 失败
            console.error(err)
          }
        })
      },
      messageConfig() {
        this.messageIds = []
        const dataArr = ['1202', '1203', '1204']
        let dataStr = dataArr.toString()
        listEnterpriseMessageConfig({
          memberId: this.getMemberId,
          ascriptionTypes: dataStr
        }).then((response) => {
          if (response.isError) return
          response.data.forEach(item => {
            if (item.miniMadeId) {
              this.messageIds.push(item.miniMadeId)
            }
          })
        }).catch(() => {
        })
      },
      cancelOrder() {
        // 取消订单事件
        // 订单里面都没有发货才可以取消订单，到订单取消页面
        // 否则提示联系卖家处理
        if (this.order.orderStatus === 20) return
        if (this.order.orderStatus === 0) {
          const that = this
          this.$pt.showModal({
            title: '温馨提示',
            content: '确认取消订单?',
            success: res => {
              if (res.confirm) {
                cancelOrder({orderId: that.order.orderId, orderFrom: that.orderFrom}).then(response => {
                  if (response.isError) return
                  that.$utils.showToast({ title: '取消成功' })
                  that.order = {}
                  that.getOrder()
                })
              }
            }
          })
        } else {
          checkCancelPaidOrder({orderId: this.order.orderId, orderFrom: this.orderFrom}).then(response => {
            if (response.isError) return
            this.$pt.navigateTo({url: '/pages/order/cancel-order/main?memberId=' + this.order.memberId + '&orderId=' + this.order.orderId})
          })
        }
      },
      doReceiveGoods(order) {
        if (order.orderStatus === 20) return
        const that = this
        this.$pt.showModal({
          content: '是否确认收货？',
          success(res) {
            if (res.confirm) {
              that.order.orderFrom = that.orderFrom
              doReceiveGoods(that.order).then(response => {
                if (response.isError) return
                that.$utils.showToast({ title: '确认收货成功' })
                that.order = {}
                that.getOrder()
              })
            } else if (res.cancel) {
              console.log('用户取消')
            }
          }
        })
      },
      queryExpress() {
        // 物流信息|| this.order.orderStatus === 20
        if (this.order.orderStatus === 2 || this.order.orderStatus === 3 || this.order.orderStatus === 4) {
          this.$pt.navigateTo({ url: '/pages/order/distribution/order/express/main?orderId=' + this.order.orderId })
        }
      },
      goDetail(item) {
        // 去商品详情页
        this.$pt.navigateTo({ url: `/pages/shop/detail/main?goodsId=${item.goodsId}&goodsType=30` })
      }
    }
  }
</script>

<style lang="less" scoped>
  .shop-c-line-t{
    height: 20px;
    line-height: 1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }
  .container {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    .bg-color {
      height: 246px;
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
  }
  .panel-cb-pl{
    background: #fff;
    border-radius: 10px;
    padding: 13px 15px 11px 15px;
  }
  .c-cb-wr{
    color: #FF243D;
  }
  .tag-goods{
    font-style: italic;
    font-weight: normal;
    color: #fff;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: -2px;
    box-sizing: border-box;
    width: 37px;
    height: 18px;
    line-height: unset!important;
    background: url('https://veekrayimg.joinsun.vip/images/shop-tag.png') no-repeat;
    // background: #ec3b1f;
    background-size: 100% 100%;
    &.iosType{
      span{
        margin-bottom: -2px;
      }
    }
    span{
      margin-left: -5px;
    }
  }
  .label-ad-sp{
    display: inline-block;
    vertical-align: top;
  }
  .label-2{
    background: #FFEAEC;
    border-radius: 3px;
    color: #FF243D;
  }
  .label-3 {
    background: #FFEAEC;
    border-radius: 3px;
    color: #FF243D;
  }
  .label-1 {
    background: #E6F0FF;
    border-radius: 3px;
    color: #0066FF;
  }
  .label-4 {
    background: #EBEDFF;
    border-radius: 3px;
    color: #7427FF;
  }
  .delivery-info-box {
    background: #fff;
    position: relative;
    margin-top: 12px;
    border-radius: 10px;
    .panel-box {
      border-radius: 10px;
      .panel-body {
        border-radius: 10px;
        box-shadow: 0px 1px 1px rgba(195, 195, 195, 0.22);
        .address-info {
          .address-tag {
            background: rgba(255,36,61,0.16);
            border-radius: 3px;
          }
        }
        .self-address-info {
          justify-content: space-between;
        }
        .address-box {
          justify-content: space-between;
          align-items: flex-start;
        }
        .btn-box {
          color: #0376FF;
          .v-line {
            overflow: hidden;
            font-size: 12px;
            color: #c5c5c5;
            position: relative;
            top: -2px;
          }
        }
      }
    }
    .prompt {
      color: #A68589;
      border-radius: 0px 0px 10px 10px;
      box-sizing: border-box;
    }
  }
  .goods-list-box {
    background: #fff;
    border-radius: 10px;
    .shop-name {
      border-bottom: 0.5px solid #f5f5f5;
    }
    .goods-img-box {
      img {
        border-radius: 10px;
      }
    }
    .goods-box-right {
      justify-content: space-between;
      flex: 1;
      .goods-price-info {
        justify-content: space-between;
        align-items: flex-end;
        .retrun-btn {
          border: 1px solid #E3E3E3;
          border-radius: 13px;
        }
      }
    }
    .coupon-box {
      justify-content: space-between;
      .coupon-tag {
        background: #FF243D;
        color: #fff;
        border-radius: 2px;
      }
    }
  }
  .order-info-box {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 68px;
    .copy-btn {
      border: 1px solid #FF243D;
      border-radius: 9px;
    }
  }
  .remarks-box {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .red-color {
    color: #FF243D;
  }
  .gray-bg-color {
    background: #F5F5F5;
  }
  .btn-group-box {
    background: #fff;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    justify-content: flex-end;
    .cancle-btn {
      color: #FF243D;
      background: #fff;
      width: 112px;
      height: 38px;
      border-radius: 19px;
      border: 1px solid #FF243D;
    }
    .get-code-btn {
      color: #fff;
      background: #FF243D;
      width: 112px;
      height: 38px;
      border-radius: 19px;
    }
  }
  .code-box {
    .alert-bg {
      background: #FF243D;
      border-radius:0px 0px 10px 10px;
    }
    .subject {
      align-items: center;
      .dots {
        margin-right: 4px;
        width: 4px;
        height: 4px;
        background: #fff;
        border-radius: 50%;
      }
    }
    .code-area {
      background: #fff;
      border-radius: 10px;
      position: relative;
      z-index: 10;
      // top: -57px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0px 1px 11px 0px rgba(255, 139, 152, 0.31);
    }
    .remark-text {
      margin-top: -35px;
      margin-bottom: 19px;
    }
  }
  ._line-1{
    height: 22px;
    line-height: 22px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }
  ._line-2{
    line-height: 1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }
</style>